<template>
  <div id="app">
    <div>
      <div class="tab-box">
        <button :class="[isActive1?'button1':'button']" @click="basic" style="border-right: none;">
          <i class="el-icon-share"></i>
          <span class="common-span">图斑其本信息</span>
        </button>
        <button :class="[isActive2?'button1':'button']" style="border-right: none;" @click="fill">
          <i class="el-icon-share"></i>
          <span class="common-span">图斑申报信息</span>
        </button>
        <button :class="[isActive3?'button1':'button']" @click="photo">
          <i class="el-icon-share"></i>
          <span class="common-span">现场照片</span>
        </button>

      </div>
      <div v-if="isActive1" class="table-box">
        <table cellspacing="0">
          <tr>
            <td style="width: 10rem;;height: 2rem;border-right: none;background-color: #f8f8f8">省级行政区名称</td>
            <td style="width: 20rem;border-right: none;background-color: #ffffff;text-align: left">
              <span class="common-span">云南省</span></td>
            <td style="width: 10rem;border-right: none;background-color: #f8f8f8">所在行政区</td>
            <td style="width: 20rem;;background-color: #ffffff;text-align: left">
              <span class="common-span">昆明市 禄劝县</span>
            </td>
          </tr>
        </table>
      </div>
      <div v-if="isActive2">图斑申报信息</div>
      <div v-if="isActive3">现场照片</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {},
  data() {
    return {
      options: [
        {
          "value": "1",
          "label": "同意"
        },
        {
          "value": "0",
          "label": "不同意"
        },
        {
          "value": "2",
          "label": "其他"
        },
      ],
      models: {
        state: {
          value: "0"
        }
      },
      isActive1: true,
      isActive2: false,
      isActive3: false
    }
  },
  methods: {
    changeRadio(val) {
      console.log(val);
    },
    basic() {
      this.isActive1 = true;
      this.isActive2 = false;
      this.isActive3 = false;
    },
    fill() {
      this.isActive2 = true;
      this.isActive1 = false;
      this.isActive3 = false;
    },
    photo() {
      this.isActive3 = true;
      this.isActive2 = false;
      this.isActive1 = false;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.tab-box {
  display: flex;
  justify-content: center;
}

.button {
  width: 16rem;
  height: 2.2rem;
  border-radius: 0px;
  border: 0.001rem #e2e1e1 solid;
  background-color: #f8f8f8;
  color: #3f9eff;
}

.button1 {
  width: 16rem;
  height: 2.2rem;
  border-radius: 0px;
  border: 0.001rem #e2e1e1 solid;
  background-color: #3f9eff;
  color: white;
}

.table-box {
  display: flex;
  justify-content: center;
  font-size: 0.6rem;
  margin-top: 1rem;
}

.table-box td {
  border: 0.001rem gainsboro solid;
  border-collapse: collapse;
}
.common-span {
  margin-left: 0.4rem
}

</style>
